<template>
  <div class="bg">
    <div class="box" v-for="item,index in 10" :key="index" @mousedown="toMove($event,index)" @mouseup="toMouseup(index)" style="background-color:rgb(255,255,255)"  ref="box">{{index + 1}}</div>
  </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{
        // 鼠标按下事件
        toMove(e,index){
            this.$refs.box[index].style.backgroundColor = 'rgb(255, 86, 86)'
            this.$refs.box[index].addEventListener("mousemove", ()=>{
                console.log(e);
                this.$refs.box[index].style.left = e.clientX
                this.$refs.box[index].style.top = e.clientY
                
            })
        },

        // 松开鼠标
        toMouseup(index){
            this.$refs.box[index].style.backgroundColor = 'rgb(255, 255, 255)'
            this.$refs.box[index].removeEventListener("mousemove", ()=>{});
        }
    },
}
</script>

<style scoped lang="less">
.bg{
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: rgb(211, 175, 255);
}
.box{
    margin: 0 20px;
    flex: 1;
    border: 2px solid #666;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
}
</style>